vue

#vue| 来源: 网络整理| 查看: 265

CV大法一时爽，业务变更火葬场。在业务开发过程中会遇到很多重复的场景，不能所有的东西都一直复制粘贴，作为一个后端开发，我们讲解面向对象开发，没有对象怎么办，先new一个呗。

首先创建一个基础的vue文件

BasicVue.vue 这个vue是以后开发所有公用组件的父组件

export default { name: "BasicVue", data() { return { } }, model: { prop: 'name',// 指定父组件中v-model绑定到子组件上的属性名 event: 'update:name',// 指定子组件中属性发生改变的时候，触发父组件什么方法 }, computed: { // 通过计算属性达到访问父组件值和修改父组件值的目的 _name: { get() { return this.name }, set(newVal, oldVal) { // 通过发射修改父组件的值 this.$emit('update:name', newVal) } } }, props: { // 提供给父组件绑定的属性 name: { type: String, default: function () { return '' } } }, methods:{ } } 再创建一个Child.vue组件下面是子组件中的按钮 {{_name}} import BasicVue from './BasicVue' export default { name: "Child", extends: BasicVue,// 继承基础组件的时候会继承基础组件中定义的计算属性、方法、属性等等、、、 methods: { changeName() { // 注意此处不能直接设置this.name 而应该通过计算属性中的_name去修改父组件的值 this._name = '子组件' } } }

看过上一篇博文的应该知道将上面的BasicVue和Child放到一起才是我们的Child.vue，但是本篇通过extends将双向绑定的代码剥离到BasicVo中，以后开发子组件的时候就不用关心数据双向绑定的问题了。

【本文地址】

vue

vue

今日新闻

推荐新闻